<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科创中心信息汇总</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
        }

        #map-container {
            position: relative;
            max-width: 100%;
            max-height: 100vh;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
        }

        #map-image {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100vh;
        }
        /*原点形状的热点*/
       /* .hotspot {
            position: absolute;
            width: 24px;
            height: 24px;
            background-color: rgba(255, 59, 48, 0.9);
            border-radius: 50%;
            border: 2px solid white;
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 0 8px rgba(0,0,0,0.6);
            z-index: 10;
        }

        .hotspot:hover {
            transform: translate(-50%, -50%) scale(1.4);
            background-color: #ff3b30;
        }

        .hotspot::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background: white;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
        */

        /* ===== 立体水滴地图标记 ===== */
        .hotspot {
            position: absolute;
            width: 26px;
            height: 38px;
            cursor: pointer;
            transform: translate(-50%, -100%);
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            z-index: 10;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

            /* 主体（水滴头部） */
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 26px;
                height: 26px;
                background: linear-gradient(135deg, #ff5a52 0%, #ff3b30 80%);
                border-radius: 50% 50% 50% 0;
                transform: rotate(-45deg);
                box-shadow:
                        inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                        1px 1px 3px rgba(0, 0, 0, 0.3);
            }

            /* 高光效果 */
            &::after {
                content: '';
                position: absolute;
                top: 8px;
                left: 8px;
                width: 10px;
                height: 10px;
                background: rgba(255, 255, 255, 0.8);
                border-radius: 50%;
                filter: blur(0.5px);
            }

            /* 底部尖角 */
            .pin-tail {
                position: absolute;
                bottom: -1px;
                left: 50%;
                width: 8px;
                height: 10px;
                background: linear-gradient(to bottom, #ff3b30 20%, #d6221a 100%);
                transform: translateX(-50%) perspective(10px) rotateX(20deg);
                clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
                box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
                z-index: -1;
            }

            /* 投影（增强立体感） */
            .pin-shadow {
                position: absolute;
                bottom: -6px;
                left: 50%;
                width: 16px;
                height: 6px;
                background: rgba(0, 0, 0, 0.15);
                border-radius: 50%;
                transform: translateX(-50%) scaleY(0.6);
                filter: blur(3px);
                z-index: -2;
            }
        }

        .hotspot:hover {
            transform: translate(-50%, -100%) scale(1.2);
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4));

            &::before {
                background: linear-gradient(135deg, #ff6a62 0%, #ff4b40 80%);
            }

            .pin-tail {
                background: linear-gradient(to bottom, #ff4b40 20%, #e7322a 100%);
            }

            .pin-shadow {
                transform: translateX(-50%) scale(1.1);
                opacity: 0.8;
            }
        }




        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            width: 85%;
            max-width: 700px;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            animation: modalFadeIn 0.3s ease-out;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 28px;
            cursor: pointer;
            color: #888;
            transition: color 0.2s;
            font-weight: bold;
        }

        .close-btn:hover {
            color: #333;
        }

        .modal-title {
            margin-top: 0;
            color: #2c3e50;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            font-size: 24px;
        }

        /* 表格样式 */
        .modal-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            font-size: 15px;
        }

        .modal-table th, .modal-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .modal-table th {
            background-color: #f8f8f8;
            font-weight: 600;
            color: #333;
        }

        .modal-table tr:hover td {
            background-color: #f5f5f5;
        }

        /* 图片样式 */
        .modal-image {
            max-width: 100%;
            height: auto;
            margin: 15px 0;
            border-radius: 6px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            display: block;
        }

        .modal-image-caption {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-top: -10px;
            margin-bottom: 15px;
        }

        /* 文本样式 */
        .modal-text {
            line-height: 1.7;
            margin-bottom: 15px;
            font-size: 16px;
            color: #444;
        }

        .modal-list {
            padding-left: 20px;
            margin: 15px 0;
        }

        .modal-list li {
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .modal-highlight {
            background-color: #fff8e1;
            padding: 15px;
            border-left: 4px solid #ffc107;
            margin: 15px 0;
            border-radius: 0 4px 4px 0;
        }

        @media (max-width: 768px) {
            .modal-content {
                width: 90%;
                padding: 20px;
            }

            .modal-table th, .modal-table td {
                padding: 8px 10px;
                font-size: 14px;
            }
            /*.hotspot {
                position: absolute;
                width: 16px;
                height: 16px;
                background-color: rgba(255, 59, 48, 0.9);
                border-radius: 50%;
                border: 1px solid white;
                transform: translate(-50%, -50%);
                cursor: pointer;
                transition: all 0.3s;
                box-shadow: 0 0 6px rgba(0,0,0,0.6);
                z-index: 5;
            }*/

            .hotspot {
                width: 22px;
                height: 32px;

                &::before {
                    width: 22px;
                    height: 22px;
                }

                &::after {
                    top: 6px;
                    left: 6px;
                }
            }
        }
    </style>
</head>
<body>
<div id="map-container">
    <!-- 使用img标签确保精确控制 -->
<!--    <img id="map-image" src="https://xxcy-cs-2018-1-1811030028.github.io/image/平面图(画质缩略版2).png" loading="lazy" alt="平面图">-->
    <picture>
        <!-- 优先加载WebP格式（体积比PNG小50%以上） -->
        <source srcset="科创中心.webp" type="image/webp">
        <!-- 最终回退方案 -->
        <img
                id="map-image"
                src="科创中心.png"
                alt="平面图"
                loading="lazy">  <!-- 懒加载 -->
    </picture>

    <!-- 热点将通过JS动态添加 -->
</div>

<div id="modal" class="modal">
    <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h2 class="modal-title" id="modal-title">标记信息</h2>
        <div id="modal-text"></div>
    </div>
</div>

<script>
    // 地图标记数据 - 基于原始图片尺寸的坐标
    const markers = [
        {
            id: 1,
            x: 127,  // 原始图片上的x坐标
            y: 480,  // 原始图片上的y坐标
            title: "1号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>2513.54平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>2488.48平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>2488.48平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>2488.48平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 2,
            x: 102,  // 原始图片上的x坐标
            y: 345,  // 原始图片上的y坐标
            title: "2号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>2422.88平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>2488.48平方米</td>
                             <td>锦顺慧眼</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>2488.48平方米</td>
                             <td>金桦达</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>2488.48平方米</td>
                             <td>成都微傲</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 3,
            x: 95,  // 原始图片上的x坐标
            y: 220,  // 原始图片上的y坐标
            title: "3号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>2422.88平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>2488.48平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>2488.48平方米</td>
                             <td>美圃传媒</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>2488.48平方米</td>
                             <td>美圃传媒</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 4,
            x: 260,  // 原始图片上的x坐标
            y: 170,  // 原始图片上的y坐标
            title: "4号厂房",
            content: `
                    <div class="modal-text">
一楼层高11.5米，二到四楼层高5.5米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>2790.59平方米</td>
                            <td>华芯腾</td>
                        </tr>
                        <tr>
                            <td>第一层夹层</td>
                            <td>424.68平方米</td>
                             <td>华芯腾</td>
                        </tr>
                           <tr>
                             <td>第二层</td>
                            <td>2752.54平方米</td>
                             <td>华芯腾（预留）</td>
                        </tr>
                           <tr>
                             <td>第二层夹层</td>
                            <td>402.00平方米</td>
                             <td>华芯腾（预留）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 5,
            x: 470,  // 原始图片上的x坐标
            y: 170,  // 原始图片上的y坐标
            title: "5号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.49平方米</td>
                            <td>绿能慧充</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>绿能慧充</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64</td>
                             <td>绿能慧充</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>绿能慧充</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 6,
            x: 470,  // 原始图片上的x坐标
            y: 295,  // 原始图片上的y坐标
            title: "6号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.49平方米</td>
                            <td>华芯腾</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>华芯腾</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>翼芯微（经华控股）</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>翼芯微（经华控股）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 7,
            x: 460,  // 原始图片上的x坐标
            y: 425,  // 原始图片上的y坐标
            title: "7号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>3918.39平方米</td>
                            <td>大数据中心</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>3334.63平方米</td>
                             <td>大数据中心</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>3926.25平方米</td>
                             <td>大数据中心</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>3926.25平方米</td>
                             <td>大数据中心</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 8,
            x: 290,  // 原始图片上的x坐标
            y: 425,  // 原始图片上的y坐标
            title: "8号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.49平方米</td>
                            <td>川盈电子</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 13,
            x: 960,  // 原始图片上的x坐标
            y: 170,  // 原始图片上的y坐标
            title: "13号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.49平方米</td>
                            <td>顺九精密</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>顺九精密</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>顺九精密</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 14,
            x: 1350,  // 原始图片上的x坐标
            y: 170,  // 原始图片上的y坐标
            title: "14号厂房",
            content: `
                    <div class="modal-text">
一楼层高11.5米，二到四楼层高5.5米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4256.74平方米</td>
                            <td>沃妤新材料</td>
                        </tr>
                        <tr>
                            <td>第一层夹层</td>
                            <td>428.51平方米</td>
                             <td>沃妤新材料</td>
                        </tr>
                           <tr>
                             <td>第二层</td>
                            <td>4206.78平方米</td>
                             <td>沃妤新材料</td>
                        </tr>
                           <tr>
                             <td>第二层夹层</td>
                            <td>401.96平方米</td>
                             <td>沃妤新材料</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 15,
            x: 1430,  // 原始图片上的x坐标
            y: 285,  // 原始图片上的y坐标
            title: "15号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>3954.65平方米</td>
                            <td>神舟微科（晁合微）</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 16,
            x: 1430,  // 原始图片上的x坐标
            y: 565,  // 原始图片上的y坐标
            title: "16号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>3954.65平方米</td>
                            <td>神舟微科（晁合微）</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>3937.00平方米</td>
                             <td>神舟微科（晁合微）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 17,
            x: 1370,  // 原始图片上的x坐标
            y: 670,  // 原始图片上的y坐标
            title: "17号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.31平方米</td>
                            <td>顺芯半导体（合科泰）</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 18,
            x: 1100,  // 原始图片上的x坐标
            y: 670,  // 原始图片上的y坐标
            title: "18号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.31平方米</td>
                            <td>顺芯半导体（合科泰）</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>顺芯半导体（合科泰）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 19,
            x: 1095,  // 原始图片上的x坐标
            y: 545,  // 原始图片上的y坐标
            title: "19号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>3421.03平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>3408.63平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>3408.63平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>3408.63平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 20,
            x: 1300,  // 原始图片上的x坐标
            y: 460,  // 原始图片上的y坐标
            title: "20号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>3068.98平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>3056.24平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>3056.24平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>3056.24平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 21,
            x: 1110,  // 原始图片上的x坐标
            y: 470,  // 原始图片上的y坐标
            title: "21号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>2411.11平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>2447.84平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>2447.84平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>2447.84平方米</td>
                             <td>临深（杭州拓深）</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
        {
            id: 22,
            x: 960,  // 原始图片上的x坐标
            y: 300,  // 原始图片上的y坐标
            title: "22号厂房",
            content: `
                    <div class="modal-text">
一楼层高6.0米，二到四楼层高4.8米，二层平均载荷8.0千牛顿/平方米，三到四层平均载荷6.0千牛顿/平方米。
                    </div>

                    <table class="modal-table">
                        <tr>
                            <th>楼层</th>
                            <th>面积</th>
                            <th>入驻企业</th>
                        </tr>
                        <tr>
                            <td>第一层</td>
                            <td>4306.31平方米</td>
                            <td>暂无</td>
                        </tr>
                        <tr>
                            <td>第二层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第三层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                           <tr>
                             <td>第四层</td>
                            <td>4283.64平方米</td>
                             <td>暂无</td>
                        </tr>
                    </table>

<!--                    <div class="modal-highlight">-->
<!--                        <strong>历史沿革：</strong> 北京有着3000余年的建城史和860余年的建都史，是世界历史文化名城。-->
<!--                    </div>-->
<!--这个图片可以放置1号楼的场景与内部入驻企业
                    <img src="https://via.placeholder.com/600x300/eee/333?text=北京城市风光" class="modal-image" alt="北京风光">
                    <p class="modal-image-caption">北京城市风貌</p>-->
                `
        },
    ];

    // 获取DOM元素
    const mapContainer = document.getElementById('map-container');
    const mapImage = document.getElementById('map-image');
    const modal = document.getElementById('modal');
    const modalTitle = document.getElementById('modal-title');
    const modalText = document.getElementById('modal-text');

    // 原始图片尺寸
    const originalWidth = 1600;
    const originalHeight = 900;

    // 初始化地图标记
    function initMarkers() {
        // 清除现有热点
        document.querySelectorAll('.hotspot').forEach(el => el.remove());

        // 计算当前图片缩放比例
        const currentWidth = mapImage.clientWidth;
        const currentHeight = mapImage.clientHeight;
        const scaleX = currentWidth / originalWidth;
        const scaleY = currentHeight / originalHeight;

        // 创建热点标记
        markers.forEach(marker => {
            const hotspot = document.createElement('div');
            hotspot.className = 'hotspot';

            // 计算缩放后的位置
            const x = marker.x * scaleX;
            const y = marker.y * scaleY;

            hotspot.style.left = `${x}px`;
            hotspot.style.top = `${y}px`;

            // 存储标记数据
            hotspot.dataset.title = marker.title;
            hotspot.dataset.content = marker.content;

            // 添加点击事件
            hotspot.addEventListener('click', function(e) {
                e.stopPropagation();
                modalTitle.textContent = this.dataset.title;
                modalText.innerHTML = this.dataset.content;
                modal.style.display = 'flex';

                // 滚动到顶部
                modalText.scrollTop = 0;
            });

            mapContainer.appendChild(hotspot);
        });
    }

    // 窗口大小变化时重新计算标记位置
    function handleResize() {
        initMarkers();
    }

    // 图片加载完成后初始化标记
    mapImage.onload = function() {
        initMarkers();

        // 确保图片居中显示
        mapContainer.style.width = mapImage.clientWidth + 'px';
        mapContainer.style.height = mapImage.clientHeight + 'px';
    };

    // 点击背景关闭模态框
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.style.display = 'none';
        }
    });

    // 点击关闭按钮关闭模态框
    document.querySelector('.close-btn').addEventListener('click', function() {
        modal.style.display = 'none';
    });

    // 按ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            modal.style.display = 'none';
        }
    });

    // 初始化监听器
    window.addEventListener('resize', handleResize);


    //懒加载优化
    // 图片懒加载（如果未自动生效）
    document.addEventListener('DOMContentLoaded', function() {
        const img = document.getElementById('map-image');
        if (img.complete) {
            initMarkers(); // 如果图片已缓存，直接初始化
        } else {
            img.onload = initMarkers; // 图片加载完成后初始化
        }
    });
</script>
</body>
</html>
